<div id="api-breadcrumb-bar">
    <breadcrumbs>
        <li breadcrumb label="Settings" [route]="[ '/settings' ]"></li>
        <li breadcrumb label="Linked Accounts" class="active"></li>
    </breadcrumbs>
</div>
<page-error [error]="pageError" *ngIf="pageError"></page-error>
<div class="container-fluid" *ngIf="!pageError">
    <div class="row" style="min-height: 35px"></div>
    <div class="row row-cards-pf">
        <div class="col-xs-12 col-sm-6">
            <!-- Link Error -->
            <div class="card-pf card-pf-accented card-pf-error" *ngIf="isLinkError()">
                <div class="card-pf-heading">
                    <h2 class="card-pf-title">
                        <span class="fa fa-fw fa-exclamation"></span>
                        <span>Account Linking Error</span>
                    </h2>
                </div>
                <div class="card-pf-body">
                    <div [ngSwitch]="linkError">
                        <p *ngSwitchCase="'not_logged_in'">
                            Account linking has failed because you were not logged in.  This has caused
                            the process to fail, so you must go back to the Accounts page and try again.
                        </p>
                        <p *ngSwitchCase="'unknown_identity_provider'">
                            Account linking has failed because no Identity Provider for accounts of type
                            <strong>{{ accountType }}</strong> has been configured.  Please contact your
                            system administrator to resolve this configuration problem.
                        </p>
                        <p *ngSwitchDefault>
                            An unexpected error occurred while trying to create a linked account.  The process
                            has failed, so you must go back and try again.
                        </p>
                    </div>
                    <div class="actions">
                        <a class="btn btn-default" routerLink="/settings/accounts">Back to Accounts</a>
                    </div>
                </div>
            </div>

            <!-- Please Wait, Linking... -->
            <div class="card-pf card-pf-accented" *ngIf="!alreadyCompleted && !isLinkError()">
                <div class="card-pf-heading">
                    <h2 class="card-pf-title">
                        <span class="fa fa-fw fa-info"></span>
                        <span>Finalizing Linked Account</span>
                    </h2>
                </div>
                <div class="card-pf-body">
                    <p>
                        You've successfully authorized Apicurio Studio with
                        <span *ngIf="isGitHub()"><a href="https://www.github.com">GitHub</a></span>
                        <span *ngIf="isGitLab()"><a href="https://www.gitlab.com">GitLab</a></span>
                        <span *ngIf="isBitbucket()"><a href="https://www.bitbucket.org">Bitbucket</a></span>
                        and we are now finalizing the link.  This should only take a
                        moment, after which you will be redirected back to the
                        <a [routerLink]="['/settings/accounts']">Settings &gt;&gt; Accounts</a> page.
                    </p>
                    <p class="in-progress"><span class="spinner spinner-xs spinner-inline"></span> Finalizing account link, please wait...</p>
                    <div class="actions">
                    </div>
                </div>
            </div>

            <!-- Action Already Completed -->
            <div class="card-pf card-pf-accented" *ngIf="alreadyCompleted">
                <div class="card-pf-heading">
                    <h2 class="card-pf-title">
                        <span class="fa fa-fw fa-info-circle"></span>
                        <span>Action Already Completed</span>
                    </h2>
                </div>
                <div class="card-pf-body">
                    <p>
                        This account has already been successfully linked.  Click the button below
                        to return to the Settings page.
                    </p>
                    <div class="actions">
                        <a class="btn btn-default" routerLink="/settings/accounts">Back to Accounts</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>